<%@ page isELIgnored="false" pageEncoding="UTF-8" contentType="text/html; UTF-8" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>患者管理系统</title>
    <script src="js/jquery-1.12.4.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.all.js"></script>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row">
        <div class="layui-col-sm12">
            <!--数据渲染表格-->
            <table id="patientTable" class="layui-table" lay-filter="patientTableFilter"></table>
        </div>
    </div>
</div>
</body>

<!--添加的 form 表格-->
<form class="layui-form" id="addForm" style="display: none;padding: 20px 50px 0 0" lay-filter="addFormFilter">

    <input type="hidden" name="bannerId" class="layui-input" id="tag">

    <div class="layui-form-item">
        <label class="layui-form-label">图片名称</label>
        <div class="layui-input-block">
            <input type="text" name="bannerOldName" value="sfsfes" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">图片描述</label>
        <div class="layui-input-block">
            <input type="text" name="bannerDescription" value="ssfsafesgr" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-block">
            <input type="radio" name="guruStatus" value="0" title="禁用">
            <input type="radio" name="guruStatus" value="1" title="下架" checked>
            <input type="radio" name="guruStatus" value="2" title="正常" checked>
        </div>
    </div>

    <div class="layui-form-item">
        <input type="hidden" name="bannerImageUrl" id="v_img"/>
        <label class="layui-form-label">上传图片</label>
        <button type="button" class="layui-btn " id="upload">
            <i class="layui-icon">&#xe67c;</i>上传图片
        </button>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="button" class="layui-btn" lay-submit lay-filter="addSubmitFilter">提交</button>
            <button type="button" class="layui-btn" lay-submit lay-filter="addCancelFilter">取消</button>
        </div>
    </div>
</form>

<!-- 删除 修改的操作工具条-->
<script type="text/html" id="deleteOrUpdate">
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
    <a class="layui-btn layui-btn-xs" lay-event="update">修改</a>
</script>

<!-- 添加、批量删除的操作工具条-->
<script type="text/html" id="andOrDeleteMulty">
    <a class="layui-btn" lay-event="add">添加</a>
    <a class="layui-btn  layui-btn-danger" lay-event="deleteMulty">批量删除</a>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <div class="layui-inline">
        <!--条件查询的 form 表格-->
        <form class="layui-form" id="searchForm" lay-filter="searchFormFilter">
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    <input type="text" name="bannerOldName" placeholder="请输入名称" class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <button type="submit" class="layui-btn" lay-submit lay-filter="searchSubmitFilter">提交</button>
                </div>
            </div>
        </form>
    </div>
</script>

<script type="text/javascript">
    layui.use(['table', 'form', 'layer','upload'], function () {

        var table = layui.table;
        var form = layui.form;
        var upload = layui.upload;

        table.render({
            elem: '#patientTable',
            url: '/cmfz/banner/getAll',
            page: false,
            toolbar: '#andOrDeleteMulty',
            cols: [[
                {type: 'checkbox'},
                {title: '轮播图编号', field: 'bannerId'},
                {title: '轮播图名称', field:'bannerOldName'},
                {title: '详情简介', field: 'bannerDescription'},
                {title: '创建日期', field: 'bannerDate'},
                {title: '状态', templet:function (d) {
                        if(d.bannerState==0) return '禁用';
                        if(d.bannerState==1) return '下架';
                        if(d.bannerState==2) return '正常';
                    }},
                {title: '图片', templet: '<div><img src="${pageContext.request.contextPath}/{{d.bannerImageUrl}}"/></div>'},
                {title: '操作', toolbar: '#deleteOrUpdate'}
            ]]
        });

//==================添加绑定事件，打开弹出层 开始========================================
        table.on('toolbar(patientTableFilter)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            if (obj.event == 'add') {
                layer.open({
                    type: 1,
                    content: $("#addForm"),
                    area: ['450px', '350px'],
                    title: '添加'
                });
                form.render();
            } else {
                var arr = checkStatus.data; //获取选择的数据
                var ids = [];
                for (var i = 0; i < arr.length; i++) {
                    ids.push(arr[i].bannerId)
                }
                if (arr.length == 0) {
                    layer.msg('至少选择一个要删除的选项')
                    return;
                }

                $.ajax({
                    url: '/cmfz/banner/delBulk',
                    data: 'ids=' + ids,
                    success: function (msg) {
                        if (msg) table.reload('patientTable');
                        else {
                            layer.msg("删除失败");
                            table.reload('patientTable');
                        }
                    }
                });
            }
        });
//==================添加绑定事件，打开弹出层 结束========================================

        upload.render({
            elem: '#upload'
            , url: '/cmfz/file/upload'
            , accept: 'file' //普通文件
            , done: function (res) {
                console.log(res);
                form.val('addFormFilter', {
                    bannerImageUrl: res.filename,
                });
            }
        });

//===================修改&删除 事件绑定开始=========================================
        table.on('tool(patientTableFilter)', function (obj) {
            if (obj.event == "delete") {
                layer.confirm("确认要删除吗？", function (index) {
                    $.ajax({
                        url: '/cmfz/banner/delById',
                        data: "bannerId=" + obj.data.bannerId,
                        dataType: "json",
                        success: function (msg) {
                            if (msg) {
                                table.reload('patientTable');
                                layer.close(index);
                            } else layer.msg("删除异常")
                        }
                    });
                });
            } else if (obj.event == "update") {
                $.ajax({
                    url: '/cmfz/banner/getOne',
                    data: 'bannerId=' + obj.data.bannerId,
                    success: function (result) {
                        form.val('addFormFilter', {
                            bannerId: result.bannerId,
                            bannerOldName: result.bannerOldName,
                            bannerState:result.bannerState,
                            bannerImageUrl:result.bannerImageUrl,
                            bannerDescription:result.bannerDescription
                        });
                    }
                })
                layer.open({
                    type: 1,
                    content: $("#addForm"),
                    area: ['400px', '350px'],
                    title: '修改'
                });
            }
        })
//===================修改&删除 事件绑定结束===============================================


//===========================添加与修改功能============================================
        form.on('submit(addSubmitFilter)', function () {
            console.log(111111111)
            if ($("#tag").val() == '') {
                $.ajax({
                    url: '/cmfz/banner/addOne',
                    data: $("#addForm").serialize(),
                    dataType: 'json',
                    async: true,
                    success: function (result) {
                        if (result) {
                            layer.closeAll();//添加成功关闭弹框
                            $("#addForm")[0].reset();  //清空输入框
                            table.reload('patientTable');
                        }
                    }
                });
            } else {
                $.ajax({
                    url: '/cmfz/banner/update',
                    data: $("#addForm").serialize(),
                    dataType: 'json',
                    async: true,
                    success: function (result) {
                        if (result) {
                            layer.closeAll();//添加成功关闭弹框
                            $("#addForm")[0].reset();  //清空输入框
                            table.reload('patientTable');
                        }
                    }
                });
            }
            return false;//阻止表单提交
        })

        form.on('submit(searchSubmitFilter)',function (data) {
           /* console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}*/

            table.reload('patientTable',{
                where: {
                    bannerOldName:data.field.bannerOldName
                },
                page:{
                    curr:1
                }
            })
            return false;
        })
    });


</script>
</html>